<template>
  <div>
    <el-container style="height: 696px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;width: 100%;">
          <Top></Top>
        </el-header>
        <el-main
          v-loading="loading"
          element-loading-text="文件正在上传，请稍后..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.5)">
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <b style="color: #606266;margin: 20px 30px;text-align: center;font-size: 20px;">已加入的课程下的作业列表信息</b>
              </div>
            </el-col>
          </el-row>
          <!--作业列表信息-->
          <div
            style="margin: 50px auto;width: 90%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
            <el-table
              :data="taskData"
              border>
              <el-table-column
                prop="taskName"
                label="作业名称">
              </el-table-column>
              <el-table-column
                prop="teacherName"
                label="老师姓名">
              </el-table-column>
              <el-table-column
                prop="classroomName"
                label="所属班级">
              </el-table-column>
              <el-table-column
                prop="courseName"
                label="所属课程">
              </el-table-column>
              <el-table-column
                prop="startTime"
                label="开始时间"
                width="100">
              </el-table-column>
              <el-table-column
                prop="endTime"
                label="结束时间"
                width="100">
              </el-table-column>
              <el-table-column
                prop="numberPersonsDue"
                label="应交人数">
              </el-table-column>
              <el-table-column
                prop="taskDescribe"
                label="作业描述">
              </el-table-column>
              <el-table-column
                prop="enclosureName"
                label="附件名称">
              </el-table-column>
              <el-table-column
                label="作业状态"
                width="120">
                <template slot-scope="scope">
                  <el-tag :type="type">{{scope.row.status}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                label="提交情况">
                <template slot-scope="scope">
                  <el-tag :type="submitStatus">{{scope.row.studentSubmitStatus}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="165">
                <template slot-scope="scope">
                  <el-button size="small" type="primary" round>详情</el-button>
                  <el-button size="small" type="success" @click="openSubmitTask(scope.row)" round>提交</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!--提交作业的对话框-->
          <div>
            <el-dialog
              title="上传作业"
              :visible.sync="centerDialogVisible"
              width="50%"
              center>
              <span>
                <div>
                  <div style="margin-bottom: 20px;">
                    <el-descriptions title="作业信息" :column="3" border>
                      <el-descriptions-item label="作业名称" label-class-name="my-label" content-class-name="my-content">{{submitTask.taskName}}</el-descriptions-item>
                      <el-descriptions-item label="所属班级" label-class-name="my-label" content-class-name="my-content">{{submitTask.classroomName}}</el-descriptions-item>
                      <el-descriptions-item label="所属课程" content-class-name="my-content">{{submitTask.courseName}}</el-descriptions-item>
                      <el-descriptions-item label="老师姓名">{{submitTask.teacherName}}</el-descriptions-item>
                      <el-descriptions-item label="作业状态">
                        <el-tag size="small">{{submitTask.status}}</el-tag>
                      </el-descriptions-item>
                      <el-descriptions-item label="作业描述" :contentStyle="{'text-align': 'left'}">{{submitTask.taskDescribe}}</el-descriptions-item>
                    </el-descriptions>
                  </div>
                </div>
                <el-divider content-position="left"><i
                  class="el-icon-s-comment"></i>&nbsp;&nbsp;&nbsp;请填写个人信息</el-divider>
                <div style="margin-bottom: 40px;">
                  <el-form :model="studentData" :rules="rules" ref="studentData" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="学生姓名" prop="studentName">
                      <el-input v-model="studentData.studentName"></el-input>
                    </el-form-item>
                    <el-form-item label="学生学号" prop="studentNum">
                      <el-input v-model="studentData.studentNum"></el-input>
                    </el-form-item>
                  </el-form>
                </div>
                <el-divider content-position="left"><i
                  class="el-icon-document"></i>&nbsp;&nbsp;&nbsp;上传作业附件</el-divider>
                <div style="margin: 10px 100px;">
                  <el-upload
                    :auto-upload="false"
                    class="upload-demo"
                    name="studentUploadFile"
                    drag
                    ref="upload"
                    :action="uploadUrl()"
                    :on-progress="fileUploading"
                    :on-success="fileuploadSuccess"
                    :file-list="fileList"
                    multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div class="el-upload__tip" slot="tip">上传文件列表</div>
                </el-upload>
                </div>
              </span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                 <el-button type="info" @click="resetForm('studentData')">重置信息</el-button>
                <el-button type="primary" @click="submitTaskEnclosure('studentData')">提交作业</el-button>
              </span>
            </el-dialog>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Left from '@/components/studentSide/left'
import Top from '@/components/studentSide/top'

export default {
  name: 'studentAllTask',
  data () {
    return {
      submitStatus: 'danger',
      loading: false,
      centerDialogVisible: false,
      type: 'success',
      studentId: '',
      formLabelWidth: '120px',
      taskData: [],
      dialogFormVisible: false,
      submitTask: [],
      fileList: [],
      studentData: {
        studentName: '',
        studentNum: ''
      },
      submitTaskData: {
        studentName: '',
        studentNum: '',
        classroomId: '',
        courseId: '',
        taskId: '',
        teacherId: '',
        enclosureId: ''
      },
      rules: {
        studentName: [
          {required: true, message: '请输入您的姓名', trigger: 'blur'},
          {min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur'}
        ],
        studentNum: [
          {required: true, message: '请输入您的学号', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
        ]
      }
    }
  },
  created () {
    this.getStudentId()
    this.getAllTask()
  },
  methods: {
    // 获取教学生id
    getStudentId () {
      this.studentId = JSON.parse(localStorage.getItem('student')).studentId
    },
    // 获取所有作业
    getAllTask () {
      this.$axios.post('http://localhost:8888/studentGeAllTaskByStudentId/' + this.studentId).then(res => {
        console.log(res)
        if (res.data.flag && res.data.data !== null) {
          this.$message({
            message: '恭喜你，作业信息获取成功',
            type: 'success'
          })
          this.taskData = res.data.data
        } else if (res.data.flag === false && res.data.data === null) {
          this.$message({
            message: '警告哦，您还没有选择课程，请先选择课程',
            type: 'warning'
          })
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 打开作业上传的对话框
    openSubmitTask (row) {
      if (row.status === '作业正在进行') {
        this.centerDialogVisible = true
        this.submitTask = row
        this.submitTaskData.classroomId = row.classroomId
        this.submitTaskData.courseId = row.courseId
        this.submitTaskData.taskId = row.taskId
        this.submitTaskData.teacherId = row.teacherId
        this.submitTaskData.enclosureId = row.enclosureId
      } else if (row.status === '作业已截止') {
        this.$message.error('错了哦，作业已截止，无法提交作业')
        this.centerDialogVisible = false
      } else if (row.status === '作业未开始') {
        this.$message({
          message: '警告，作业未开始,暂时不能提交作业哦',
          type: 'warning'
        })
        this.centerDialogVisible = false
      }
    },
    // 文件上传成功时的钩子
    fileuploadSuccess () {
      this.loading = false
      this.$message({
        message: '恭喜你，文件上传成功',
        type: 'success'
      })
    },
    // 文件上传时的钩子
    fileUploading () {
      this.loading = true
      this.$message('文件正在上传，请稍后...')
    },
    // 上传附件URL
    uploadUrl: function () {
      return (
        'http://localhost:8888/studentUploadFile/' + this.studentId
      )
    },
    // 上传作业
    submitTaskEnclosure (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitTaskData.studentName = this.studentData.studentName
          this.submitTaskData.studentNum = this.studentData.studentNum
          this.centerDialogVisible = true
          // 上传附件
          this.$refs.upload.submit()
          // 上传表单
          this.$axios.post('http://localhost:8888/studentSubmitTask/' + this.studentId, this.submitTaskData).then(res => {
            if (res.data.flag) {
              this.$message({
                message: '恭喜你，作业上传成功',
                type: 'success'
              })
              this.centerDialogVisible = false
              this.getAllTask()
            } else {
              this.$message.error('错了哦，作业上传失败')
            }
          }).catch(err => {
            return Promise.reject(err)
          })
        } else {
          this.$message({
            message: '警告哦，请按要求填写个人信息',
            type: 'warning'
          })
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  },
  components: {
    Left,
    Top
  }

}
</script>
<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
<style scoped>
  .router-link-active {
    text-decoration: none;
    color: yellow;
  }

  a {
    text-decoration: none;
    color: white;
  }

  .el-chart-a {
    width: 1200px;
    height: 500px;
    margin: 10px auto;
  }

  .el-chart-1 {
    width: 500px;
    height: 500px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
    list-style-type: none;
    margin-right: 30px;
  }

  .el-chart-2 {
    width: 500px;
    height: 500px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
    list-style-type: none;
  }

  .el-chart-b {
    width: 1200px;
    height: 500px;
    margin: 20px auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
  }

  li {
    float: left;
  }

  .el-chart {
    width: 100%;
    height: 250px;
  }

  .el-chart ul li {
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
    width: 220px;
    height: 120px;
    /*border: 1px solid gold;*/
    list-style-type: none;
    margin-right: 50px;
  }

  .el-chart ul li:hover {
    background-color: #eee;
  }

  .el-button-a {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #8bc34a;
    border: 1px solid #DCDFE6;
    color: #ffffff;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 9px 15px;
    font-size: 14px;
    border-radius: 50px;
  }

  .el-button.is-round {
    border-radius: 20px;
    padding: 8px 18px;
  }
</style>
<style>
  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #cadcf5;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
<style>
  .my-label {
    background: #FDE2E2;
  }

  .my-content {
    background: #E1F3D8;
  }
</style>
